<template>
  <div>
    <vxe-toolbar>
      <template v-slot:buttons>
        <el-button v-if="$hasPermission('sys:export-data:export')" type="primary" @click="exportHandle()">
          {{$t('dataExport.exportButtonTitle')}}
        </el-button>
        <el-button @click="$refs.xTable.setAllTreeExpansion(true)">{{ $t('openall') }}</el-button>
        <el-button @click="$refs.xTable.clearTreeExpand()">{{ $t('closeall') }}</el-button>
      </template>
      <template v-slot:tools>
        <el-button icon="el-icon-refresh" @click="getDataList()" circle></el-button>
      </template>
    </vxe-toolbar>
    <vxe-table :loading="dataListLoading" :data="dataList" ref="xTree" auto-resize class="vxe-table-element"
      @select-change="dataListSelectionChangeHandleVex" @select-all="dataListSelectionAllChangeHandleVex"
      :tree-config="{children: 'children'}">
      <vxe-table-column type="checkbox" width="50"></vxe-table-column>
      <vxe-table-column field="name" title="menu.name" tree-node align="left"></vxe-table-column>
      <!-- <el-table-column prop="name" :label="$t('menu.name')" header-align="center" ></el-table-column> -->
      <vxe-table-column field="icon" title="menu.icon" width="100">
        <template slot-scope="scope">
          <svg class="icon-svg" aria-hidden="true">
            <use :xlink:href="`#${scope.row.icon}`"></use>
          </svg>
        </template>
      </vxe-table-column>
      <vxe-table-column field="type" title="menu.type" width="80" align="center">
        <template slot-scope="scope">
          <el-tag size="small" :type="$getDataItem(baseData.typeList, scope.row.type).type">{{
            $t($getDataItem(baseData.typeList, scope.row.type).label) }}
          </el-tag>
        </template>
      </vxe-table-column>
      <vxe-table-column field="client" title="menu.client" width="80">
        <template slot-scope="scope">
          {{ $getDictLabel(baseData.CODE_MENU_CLIENT, scope.row.client) }}
        </template>
      </vxe-table-column>
      <vxe-table-column field="sort" title="menu.sort" width="80" align="center">
      </vxe-table-column>
      <vxe-table-column field="url" title="menu.url" width="180"></vxe-table-column>
      <vxe-table-column field="permissions" title="menu.permissions"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import TableTreeColumn from '@/components/table-tree-column'
import staticData from './menu.json'
import qs from 'qs'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      baseData: staticData,
      mixinViewModuleOptions: {
        getDataListURL: '/sys/exportData/menu/list',
        exportURL: '/sys/exportData/menu/export',
        getTreeDataListURL: '/sys/exportData/menu/list',
        treeType: true
      }
    }
  },
  components: {
    TableTreeColumn
  },
  methods: {
    // 导出
    exportHandle () {
      if (this.dataListSelections.length <= 0) {
        return this.$message({
          message: this.$t('dataExport.messageNo'),
          type: 'warning',
          duration: 500
        })
      }
      this.$prompt(this.$t('dataExport.title'), this.$t('prompt.title'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        inputPattern: /^\d+(\.\d+)?$/,
        inputErrorMessage: this.$t('dataExport.inputErrorMessage')
      }).then(({ value }) => {
        var params = qs.stringify({
          'token': this.$cookies.get('token'),
          'version': value,
          'ids': this.dataListSelections.map(item => item['id']).join(',')
        })
        window.location.href = `${window.SITE_CONFIG['apiURL']}${this.mixinViewModuleOptions.exportURL}?${params}`
      }).catch(() => {

      })
    }
  }
}
</script>
